<template>
	<div class="project_list">
		<el-card class="box-card">
			<!-- 顶部的面包屑 -->
			<template>
				<div class="clearfix">
					<el-breadcrumb separator-class="el-icon-arrow-right">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item>接口管理</el-breadcrumb-item>
					<el-breadcrumb-item>接口列表</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
			</template>
			<el-card class="box-card">
				<el-row :gutter="20">
					<el-col :span="6">
						选择项目
						<el-select v-model="project_id" placeholder="请选择项目">
							<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
					<el-col :span="6">
						<!-- 添加接口的按钮 -->
						<el-button type="primary" icon='el-icon-plus' @click='dialogCreate="true"'>添加接口</el-button>
					</el-col>
				</el-row>

				<!-- 项目列表页 -->
				<el-table :data="projectList" style="width: 100%;margin-bottom: 10px;">
					<el-table-column prop="id" label="ID" width="80" sortable>
					</el-table-column>
					<el-table-column prop="name" label="接口名" width="200">
					</el-table-column>
					<el-table-column prop="desc" label="描述信息" width="280">
					</el-table-column>
					<el-table-column prop="leader" label="负责人" width="100" sortable>
					</el-table-column>
					<el-table-column prop="tester" label="测试人员" width="100">
					</el-table-column>
					<el-table-column prop="interfaces" label="接口数量" width="120" sortable>
					</el-table-column>
					<el-table-column prop="testcases" label="用例数量" width="80">
					</el-table-column>
					<el-table-column prop="testsuits" label="套件数量" width="80">
					</el-table-column>
					<el-table-column label="操作">
						<template v-slot="scope">
							<el-button size="mini" @click="proEdit(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="proDelete(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 项目翻页管理 -->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page" :page-sizes="[5, 10, 20, 30]" :page-size="size"
					layout="total, sizes, prev, pager, next, jumper" :total="count">
				</el-pagination>
			</el-card>
		</el-card>
 
		<!-- 编辑项目的弹框 -->
		<el-dialog title="编辑项目" :visible="dialogEdit" @update:visible="dialogEdit = $event">
			<el-form :model="editProject" :rules="caseRules" ref='updateRef' label-width="80px">
				<el-form-item label="项目名" prop="name">
					<el-input v-model="editProject.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="leader">
					<el-input v-model="editProject.leader" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="测试人员" prop="tester">
					<el-input v-model="editProject.tester" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="开发人员" prop="programmer">
					<el-input v-model="editProject.programmer" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="发布应用" prop="publish_app">
					<el-input v-model="editProject.publish_app" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="描述信息">
					<el-input type="textarea" v-model="editProject.desc" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<template v-slot:footer>
				<div class="dialog-footer">
				<el-button @click="dialogEdit = false">取 消</el-button>
				<el-button type="primary" @click="updateProject">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		<!-- 创建项目的弹框 -->
		<el-dialog :visible="dialogCreate" @update:visible="dialogCreate = $event" :rules="caseRules" ref='createRef'>
			<template v-slot:title>
				<div style="text-align: center;width: 100%;font-size: 24px;">创建项目</div>
			</template>
			<el-form :model="newProject" label-width="80px" size='mini' :rules="caseRules" ref='createRef'>
				<el-form-item label="接口名称" prop="name">
					<el-input v-model="newProject.name"></el-input>
				</el-form-item>
				<el-form-item label="测试者" prop="tester">
					<el-input v-model="newProject.tester" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="leader">
					<el-input v-model="newProject.leader" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="开发人员" prop="programmer">
					<el-input v-model="newProject.programmer" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="发布应用" prop="publish_app">
					<el-input v-model="newProject.publish_app" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="项目描述">
					<el-input type="textarea" :rows="5" v-model="newProject.desc"></el-input>
				</el-form-item>
			</el-form>
			<template v-slot:footer>
				<div class="dialog-footer">
				<el-button @click="dialogCreate = false">取 消</el-button>
				<el-button type="primary" @click="createProject">提 交</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
 
<script>
	export default {
		data() {
			return {
				project_id: '',
				projectList: [],
				// 当前选择的页码
				page: 1,
				// 数据总数
				count: 0,
				//每页的数据量
				size: 10,
				//编辑窗口显示
				dialogEdit: false,
				editProject: {},
				//创建项目
				dialogCreate: false,
				newProject: {
					name: '',
					leader: '',
					tester: '',
					programmer: '',
					publish_app: '',
					desc: ''
				},
				// 校验规则
				caseRules: {
					name: [{
						required: true,
						message: '项目名不能为空',
						trigger: 'blur'
					}],
					leader: [{
						required: true,
						message: '负责人不能为空',
						trigger: 'blur'
					}, ],
					tester: [{
						required: true,
						message: '测试人员不能为空',
						trigger: 'blur'
					}, ],
					programmer: [{
						required: true,
						message: '开发人员不能为空',
						trigger: 'blur'
					}, ],
					publish_app: [{
						required: true,
						message: '发布应用不能为空',
						trigger: 'blur'
					}, ]
				}
 
			}
		},
		methods: {
			// 创建项目的方法
			createProject() {
				// 发送请求之前对表单进行预验证
				this.$refs.createRef.validate(async (valid) => {
					if (!valid) return
					// 验证通过，发送请求
					const response = await this.$request.post('/projects/', this.newProject)
					if (response.status === 201) {
						this.$message({
							type: 'success',
							message: '项目创建成功!',
							duration: 1000
						});
						// 更新页面的数据
						this.getProject()
						// 关闭弹框
						this.dialogCreate = false
					} else {
						console.log(response)
						this.$message.error('服务端异常!')
					}
 
				})
			},
			// 编辑项目
			proEdit(value) {
				console.log(value)
				// 把接收到的项目数据，
				this.editProject = {
					...value
				}
				// 显示编辑框
				this.dialogEdit = true
			},
			// 请求修改项目的接口
			async updateProject() {
				// 发送请求之前对表单进行预验证
				this.$refs.updateRef.validate(async (valid) => {
					if (!valid) return
					const response = await this.$request.put('/projects/' + this.editProject.id + '/', this
						.editProject)
					if (response.status === 200) {
						this.$message({
							message: '修改项目成功',
							type: 'success',
							duration: 1000
						})
						this.getProject()
						this.dialogEdit = false
					} else {
						this.$message({
							message: '修改失败',
							type: 'error',
							duration: 1000
						})
					}
				})
			},
 
 
			// 删除项目
			async proDelete(id) {
				console.log('当前删除的数据id为：', id)
				// 通过接口删除后端数据
				const response = await this.$request.delete('/projects/' + id + '/')
				//  后端接口是安装resetful规范设计的，delete方法成功时，返回的状态码为204
				if (response.status === 204) {
					// 删除成功
					this.$message({
						message: '删除成功',
						type: 'success',
						duration: 1000
					});
					// 重写加载数据
					this.getProject()
				} else {
					this.$message({
						message: '删除失败',
						type: 'error',
						duration: 1000
					});
				}
			},
			// 获取项目
			async getProject() {
				// 请求项目列表的接口，获取所有的项目
				const response = await this.$request.get('/projects/', {
					params: {
						page: this.page,
						size: this.size
					}
				})
				if (response.status !== 200) return this.$message.error('服务器异常')
				// 保存接口返回的项目列表
				this.projectList = response.data.results
				// 保存数据总数
				this.count = response.data.count
				console.log(response)
			},
			// 处理每页数量大小变化的方法
			handleSizeChange(size) {
				this.size = size
				this.page = 1
				this.getProject()
			},
			// 处理页码变化的方法
			handleCurrentChange(page) {
				this.page = page
				this.getProject()
			}
		},
 
		// vue实例数据挂载之后，出触发这个钩子函数
		mounted() {
			this.getProject()
		}
 
	}
</script>
 
<style>
</style>